<template>
  <el-card shadow="never" class="!border-none">
    <div class="flex items-center">
      <div class="h-4 border-l-4" style="border-color: rgb(49, 87, 242)"></div>
      <div class="ml-2 title">经营概况</div>
    </div>

    <el-scrollbar>
      <div class="ml-4 mt-6 pb-6 flex flex-wrap">
        <div class="flex sm:flex-1" v-for="(item, index) in data" :key="index">
          <div class="w-[66px] h-[66px] mr-2 mt-5 sm:mt-0">
            <img :src="item.img" />
          </div>
          <div class="flex flex-col mt-5 sm:mt-0">
            <div class="amount">{{ item.amount }}</div>
            <div class="flex">
              <div class="text">{{ item.desc }}</div>
              <div class="w-[16px] h-[16px]">
                <el-tooltip
                  :content="`${item.tips}`"
                  placement="bottom"
                  effect="dark"
                >
                  <img src="@/assets/images/finance_center/yiwen.png" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-card>
  <el-card shadow="never" class="!border-none">
    <el-form :model="formData" inline>
      <el-form-item label="订单编号">
        <el-input
          class="ls-input"
          v-model="formData.sn"
          placeholder="请输入订单编号"
        />
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input
          class="ls-input"
          v-model="formData.userInfo"
          placeholder="请输入用户名称"
        />
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input
          class="ls-input"
          v-model="formData.goodsName"
          placeholder="请输入服务名称"
        />
      </el-form-item>
      <el-form-item label="推销员名称">
        <el-input
          class="ls-input"
          v-model="formData.salesmanName"
          placeholder="请输入推销员名称"
        />
      </el-form-item>
      <el-form-item label="时间查询方式">
        <el-select
          v-model="formData.timetype"
          placeholder="请选择"
          class="ls-input"
        >
          <el-option label="按周选择时间" :value="1"></el-option>
          <el-option label="按月选择时间" :value="2"></el-option>
          <el-option label="按季度选择时间" :value="3"></el-option>
          <el-option label="按半年选择时间" :value="4"></el-option>
          <el-option label="自由选择时间" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间" v-if="formData.timetype == 1">
        <el-date-picker
          v-model="value1"
          type="week"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请选择周"
          @change="changeweek_value()"
        />
      </el-form-item>
      <el-form-item
        label="下单时间"
        v-if="
          formData.timetype == 2 ||
          formData.timetype == 3 ||
          formData.timetype == 4
        "
      >
        <el-date-picker
          v-model="value2"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM-DD"
          placeholder="请选择月"
          @change="changeweek_value2()"
        />
      </el-form-item>
      <el-form-item label="下单时间" v-if="formData.timetype == 5">
        <data-picker
          class="ls-input"
          style="width: 280px"
          v-model:startTime="formData.orderTimeStart"
          v-model:endTime="formData.orderTimeEnd"
        ></data-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="
            () => {
              resetPage();
              getsalesmanStatisticsData();
            }
          "
          >查询</el-button
        >
        <el-button @click="() => {
              resetPage();
              getsalesmanStatisticsData();
            }">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="never" class="mt-4 !border-none">
    <!--    <el-tabs-->
    <!--      class="-mt-2"-->
    <!--      v-model="formData.orderStatus"-->
    <!--      @tab-change="resetPage"-->
    <!--    >-->
    <!--      <el-tab-pane :label="`全部(${countData?.totalCount || '0'})`" name="" />-->
    <!--      <el-tab-pane-->
    <!--        :label="`预约中(${countData?.reserveCount || '0'})`"-->
    <!--        :name="1"-->
    <!--      />-->
    <!--      <el-tab-pane-->
    <!--        :label="`服务中(${countData?.servicingCount || '0'})`"-->
    <!--        :name="2"-->
    <!--      />-->
    <!--      <el-tab-pane-->
    <!--        :label="`已完成(${countData?.finishedCount || '0'})`"-->
    <!--        :name="3"-->
    <!--      />-->
    <!--      <el-tab-pane-->
    <!--        :label="`已关闭(${countData?.closeCount || '0'})`"-->
    <!--        :name="4"-->
    <!--      />-->
    <!--    </el-tabs>-->
    <div class="mt-4">
      <el-table
        ref="tableData"
        size="large"
        :data="pager.lists"
        v-loading="pager.loading"
      >
        <el-table-column property="sn" label="订单编号" min-width="200" />
        <el-table-column label="用户信息" min-width="120">
          <template #default="scope">
            <el-popover placement="top-start" width="200px" trigger="hover">
              <div class="flex">
                <span class="flex-none mr-2">头像：</span>
                <el-image
                  :src="scope.row.avatar"
                  style="width: 40px; height: 40px; border-radius: 50%"
                />
              </div>
              <div class="flex mt-2">
                <span class="flex-none mr-2">昵称：</span>
                <span>{{ scope.row.nickname }}</span>
              </div>
              <template #reference>
                <router-link
                  :to="`/user/userList/detail?id=${scope.row.userId}`"
                >
                  <div class="pointer normal">
                    {{ scope.row.nickname }}
                  </div>
                </router-link>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="服务名称" min-width="220">
          <template #default="{ row }">
            <div class="flex items-center goods-box">
              <div class="w-[60px] h-[60px]">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="row.goodsImage"
                  :preview-src-list="[row.goodsImage]"
                  :hide-on-click-modal="true"
                  :preview-teleported="true"
                  :fit="'contain'"
                />
              </div>
              <router-link
                :to="`/service/lists/edit?id=${row.goodsId}`"
                class="ml-2 xs"
              >
                <div class="goods-name">{{ row.goodsName }}</div>
                <div class="form-tips">
                  {{ row.goodsPrice }} {{ row.unitName }}
                </div>
              </router-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="totalNum" label="数量" min-width="80" />
        <el-table-column label="实付金额" min-width="100">
          <template #default="scope"> ¥{{ scope.row.orderAmount }} </template>
        </el-table-column>
        <el-table-column
          property="createTime"
          label="下单时间"
          min-width="180"
        />
        <el-table-column label="预约日期" min-width="220">
          <template #default="scope">
            {{ scope.row.appointTime }} {{ scope.row.weekDay }}
            {{ scope.row.appointTimeStartStr }}-{{
              scope.row.appointTimeEndStr
            }}
          </template>
        </el-table-column>
        <el-table-column property="contact" label="联系人" min-width="100" />
        <el-table-column label="订单状态" min-width="100">
          <template v-slot="{ row }">
            <span
              :class="{
                error:
                  row.orderStatusName === '待支付' ||
                  row.orderStatusName === '已关闭',
              }"
              >{{ row.orderStatusName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="派单状态" width="100" prop="isDispatchName">
          <template v-slot="{ row }">
            <el-tag type="success" v-if="row.isDispatch === 1"> 已派单 </el-tag>
            <el-tag type="danger" v-if="row.isDispatch === 0"> 未派单 </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end mt-4">
      <pagination v-model="pager" @change="getLists" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import {
  apiOrderLists,
  apiOrderStatis,
  postsalesmanStatistics,
} from "@/api/salesman";
import { reactive } from "vue";
import { OrderMode } from "@/enums/modeEnum";
import Pagination from "@/components/pagination/index.vue";
import DataPicker from "@/components/daterange-picker/index.vue";
import { usePaging } from "@/hooks/usePaging";
import { getLastDayOfWeek, getLastDayOfMonth } from "@/utils/timeformat";

import total_amount from "@/assets/images/finance_center/total_amount.png";
import total_order from "@/assets/images/finance_center/total_order.png";
import total_refund_amount from "@/assets/images/finance_center/total_refund_amount.png";
import wait_refund_amount from "@/assets/images/finance_center/wait_refund_amount.png";

interface formDataObj {
  sn: string; //否	string	订单编号
  userInfo: string; //否	string	用户信息
  goodsName: string; //否	string	服务名称
  salesmanName: string; // 否  string  推销员名称
  payStatus: string | number; //否	int	支付状态;0-待支付;1-已支付;
  orderTimeStart: string; //否	string	开始时间
  orderTimeEnd: string; //否	string	结束时间
  orderStatus: string | number; //否	int	订单状态;0-待支付;1-预约中;2-服务中;3-已完成;4-已关闭
  staffInfo: string; // 否 师傅信息
  isDispatch: string | number; // 否 int 派单状态;0-委派单;1-已派单
  timetype: string | number; // 时间查询类型
}

const orderMode: any = reactive<any>(OrderMode);
const formData = reactive<formDataObj>({
  sn: "",
  userInfo: "",
  goodsName: "",
  salesmanName: "",
  payStatus: "",
  orderTimeStart: "",
  orderTimeEnd: "",
  orderStatus: "",
  staffInfo: "",
  isDispatch: "",
  timetype: 5,
});

const data = ref<any>([
  {
    amount: "0",
    img: total_amount,
    desc: "累计营业额（元）",
    tips: "成交订单的金额，无论订单是否取消，只要支付过就算营业额",
  },
  {
    amount: "0",
    img: total_order,
    desc: "累计成交订单（笔）",
    tips: "已付款就算成交订单数",
  },
  {
    amount: "0",
    img: total_refund_amount,
    desc: "已退款金额（元）",
    tips: "退款记录里面已退款成功的金额",
  },
  {
    amount: "0",
    img: wait_refund_amount,
    desc: "待退款金额（元）",
    tips: "退款记录里面退款中和退款失败的金额",
  },
]);

const value1 = ref("");
const value2 = ref("");

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: apiOrderLists,
  params: formData,
});

const countData = ref<any>({});

function changeweek_value() {
  const timeStr = getLastDayOfWeek(value1.value);
  console.log(value1.value, timeStr, "111111111111111");

  formData.orderTimeStart = value1.value;
  formData.orderTimeEnd = timeStr;
}
function changeweek_value2() {
  const timeStr = getLastDayOfMonth(value2.value);
  formData.orderTimeStart = value2.value;
  formData.orderTimeEnd = timeStr;
  console.log(value2.value, timeStr, "111111111111111");
}

const getsalesmanStatisticsData = async () => {
  const res = await postsalesmanStatistics(formData);
  const i = ref(0);
  for (const key in res) {
    data.value[i.value].amount = res[key];
    i.value++;
  }
  console.log(res, "resres111111111111111");
};

getLists();
getsalesmanStatisticsData();
</script>

<style lang="scss" scoped>
:deep() .el-tabs__content {
  padding: 0;
}
.ls-input {
  width: 280px;
}

.error {
  color: #db2828;
}

.goods-box {
  .goods-name {
    color: #333333;
  }
}

.goods-box:hover {
  .goods-name {
    color: #4a5dff;
    text-decoration: underline;
  }
}
a {
  text-decoration: none !important; //去掉原有链接文字下划线
}
.el-tabs__nav-wrap::after {
  height: 1px !important;
}

.title {
  font-size: 16px;
}

.amount {
  font-family: "PingFang HK";
  font-weight: 400;
  font-size: 32px;
  text-align: left;
  color: #333;
}

.text {
  font-family: "PingFang HK";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #666;
}
</style>
